{extend name="layout/layout" /}


{block name="style"}
	<style>
		.item{
			background: #fff;
			margin-bottom: 8px;
			padding: 6px 0;
			border-bottom: 1px dashed #ccc;
			position: relative;
		}

		.item>div{
			padding: 0 10px;

		}
		.address{
			font-size:10px;
			
			line-height: 30px;
			margin-bottom: 5px;
			padding-bottom: 50px;
		}

		.address .mui-btn{
			font-size:10px;
			padding: 3px 10px;
		}

		.default{
			position: relative;
			padding-left: 25px;
		}

		.default-icon{
			width: 20px;
			height: 20px;
		}

		.footer{
			font-size:12px;
		}
		.footer .opear{
			padding-top: 5px;
		}

		.select-icon{
			position: absolute;
			top:5px;
			left: 0;
		}

		.add{
			height: 40px;
			line-height: 40px;
			position: fixed;
			left: 0;
			bottom: 0;
			text-align: center;
			width:100%;
		}


		.item.select{
			padding-right: 40px;
		}

		.item>div.select-img{
			position: absolute;
			right: 0px;
			top:25px;
		}

		.select-img img{
			width: 25px;
			height: 25px;
		}
	</style>
{/block}

{block name="main"}
	<div class="address" v-cloak>
		<div class="box" v-if="list.length > 0">
			<div class="item" :class="type == 'select'?'select':''" v-for="item, index in list" @tap="select_address(item)">
				<div class="contanct mui-row">
					<div class="username mui-col-xs-6">{{item.recipients}}</div>
					<div class="phone mui-col-xs-6 mui-text-right">{{item.mobile}}</div>
				</div>

				<div class="address">{{item.province}} {{item.city}} {{item.area}} {{item.address}}</div>

				<div class="footer mui-row" v-if="type != 'select'">
					<div class="default mui-col-xs-6" @tap="set_default(item)">
						<img class="select-icon default-icon" :src="item.is_default == 1?'/assets/img/selected.png':'/assets/img/she.png'" alt=""> 设为默认地址
					</div>
					<div class="opear mui-col-xs-6 mui-text-right">
						<a href="javascript:;" @tap="edit(item)" class="mui-btn">编辑</a>
						<a href="javascript:;" @tap="del(item,index)" class="mui-btn">删除</a>
					</div>
				</div>

				<div class="select-img" v-if="type == 'select'">
					<img :src="address_id == item.id?'/assets/img/selected.png':'/assets/img/she.png'" alt="">
				</div>
			</div>
		</div>

		<div class="no-data" v-else>您还没有添加收货地址</div>

		<a href="{:url('add')}" class="add mui-btn-theme">新增收货地址</a>
	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script>
		var addressVue = new Vue({
			el:'.address',
			data: {
				list:[],
				type: '{$type}',
				address_id : localStorage.getItem('address_id')
			},
			mounted:function(){
				this.getList();
			},
			methods: {
				getList: function(){
					layer.open({
						type:2,
					});
					var that = this;
					var url =  'address/index';
					request(that, {'url': url},function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.list = res.data;
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				edit: function(item){
					var url = '{:url("address/add")}';
						url += '?id='+item.id+'&recipients='+item.recipients+'&mobile='+item.mobile;
						url += '&address='+item.address+'&province='+item.province+'&city='+item.city;
						url += '&area='+item.area+'&province_id='+item.province_id+'&city_id='+item.city_id;
						url += '&area_id='+item.area_id;
					location.href = url;

				},
				del: function(item, index){
					var that = this;
					mui.confirm('确定删除该收货地址吗？', '提示', ['确定删除', '取消'], function(e){
						if(e.index == 0) {
							var postData = {
								'id':item.id,
							}

							layer.open({
								type:2,
							});
							var url =  'address/delAddress';
							request(that, {'url': url, 'data': postData}, function(res){
								layer.closeAll();
								mui.toast(res.msg);
								if(res.code == 200) {
									that.getList();
								}	
							});
						}
					})
					
				},
				set_default: function(item){
					var postData = item;
					postData.is_default = 1;

					layer.open({
						type:2,
					});
					var that = this;
					var url =  'address/editAddress';
					request(that, {'url': url, 'data': postData}, function(res){
						layer.closeAll();
						mui.toast(res.msg);
						if(res.code == 200) {
							that.getList();
						}	
					});
				},
				//从结算页面过来选择收货地址
				select_address: function(item){
					if(this.type == 'select') {
						localStorage.setItem('address_id', item.id);
						var url = localStorage.getItem('confirmOrderUrl');
						location.href = url;
					}
				}
			}
		});
	</script>
{/block}